<template>
  <div class="user">
    <!-- 用户信息卡 -->
    <div class="user-card">
      <div class="avator">
        <img src="" alt="">
      </div>
      <div class="infos">
        <div class="text">昵称：{{ nickName }}</div>
        <div class="text">登录名：{{ loginName }}</div>
        <div class="text">个性签名：{{ introduceSign }}</div>
      </div>
    </div>

    <!-- 选项 -->
    <div class="options-list">
      <router-link to="/my-order">
        <div class="option">
          <p>我的订单</p>
          <van-icon name="arrow" size=".3rem"/>
        </div>
      </router-link>

      <router-link to="/account-manage">
        <div class="option">
          <p>账号管理</p>
          <van-icon name="arrow" size=".3rem"/>
        </div>
      </router-link>

      <router-link to="/addressmanage">
        <div class="option">
          <p>地址管理</p>
          <van-icon name="arrow" size=".3rem"/>
        </div>
      </router-link>

      <router-link to="/about-us">
        <div class="option">
          <p>关于我们</p>
          <van-icon name="arrow" size=".3rem"/>
        </div>
      </router-link>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { getUserInfo, getCartData } from '@/api/index.js'

let nickName = ref('');
let loginName = ref('');
let introduceSign = ref('')




onMounted(() => {
  // 获取用户详细信息数据
  getUserInfo().then(res => {
    let { resultCode, data } = res;
    if (resultCode == 200) {
      nickName.value = data.nickName;
      loginName.value = data.loginName;
      introduceSign.value = data.introduceSign
    }
  })

  // 获取购物车数据
  getCartData().then(res => { })
})
</script>

<style scoped lang="less">
.user {
  position: relative;

  .user-card {
    position: absolute;
    top: .5rem;
    left: .27rem;
    display: flex;
    width: 94%;
    height: 3rem;
    background: linear-gradient(90deg, #1baeae, #51c7c7);
    border-radius: .2rem;
    box-shadow: 0 0.05333rem 0.13333rem #269090;

    .avator {
      position: absolute;
      left: .5rem;
      top: .7rem;
      width: 1.6rem;
      height: 1.6rem;
      background: pink;
      border-radius: 50%;
      overflow: hidden;
    }

    .infos {
      position: absolute;
      left: 2.5rem;
      top: .5rem;

      .text {
        font-size: .38rem;
        color: white;
        margin: .1rem;
      }
    }
  }

  .options-list{
    width: 86%;
    position: absolute;
    top: 4.5rem;
    left: .55rem;
    padding: 0 .1rem;
    .option{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1rem;
      border-bottom: 1px solid #ccc;
      p{
        font-size: .38rem;
        color: black;

      }
    }
        .option:active{
          background-color: #ccc;
        }
  }
}
</style>